<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Ly Table Demo</title>
		<link rel="stylesheet" type="text/css" href="lytable.css"/>
		<script src="jquery.min.js" type="text/javascript"></script>
		<script src="lytable.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
		<table class="table" cellspacing="0">
			<thead>
				<tr>
					<th width="10%">学号</th>
					<th width="10%">姓名</th>
					<th width="10%">性别</th>
					<th width="10%">年龄</th>
					<th width="60%">简介</th>
				</tr>
			</thead>
			<tbody>
				<tr><td>201503025</td><td>小明</td><td>男</td><td>18</td>
					<td>我很牛</td></tr>
				<tr><td>201503026</td><td>小红</td><td>女</td><td>19</td>
					<td>我的简介很长很长,很长很长,很长很长,很长很长,很长很长,很长很长</td></tr>
				<tr><td>201503027</td><td>小李</td><td>男</td><td>19</td>
					<td>小李子的简介</td></tr>
				<tr><td>201503028</td><td>小刘</td><td>男</td><td>18</td>
					<td>没啥好说的</td></tr>
			</tbody>
		</table>
		</div>
		<script>
		$('table').lyTable();
		</script>
		<style>
			.container{
				width: 80%;
				max-width: 1024px;
				background-color: lightyellow;
				margin: 5px auto 0 auto;
				padding: 5px;
			}
			table{
				width: 100%;
			}
			@media screen and (max-width: 767px) {
			.container{
				width: 90%;
				max-width: none;
			}
			}
		</style>
	</body>
</html>
